<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-card>
        <el-input placeholder="请输入内容" v-model="weibo.content" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="selectByContent"></el-button>
        </el-input>
      </el-card>
    </div>
    <h5 v-if="bool" style="margin: 10px 0px">暂未找到相关视频>>>> 为您推荐以下视频</h5>
    <div v-for="(object,index) in (weiboList) " :key="object.weiboId" style="margin-bottom: 20px">
      <!--   头像  昵称  时间  内容   评论   -->
      <el-card class="box-card">
        <!--     微博内容   -->
        <div style="display: flex">
          <el-avatar :size="50" :src="imgUrl"></el-avatar>
          <div class="avatar">
            <div style="display: flex">
              <p style="font-size: 20px;color: coral">{{ object.username }}</p>
              <img src="../../../public/static/weibo-com.png" height="30px" width="30px"/>
            </div>
            <p style="font-size: 12px;color: rgba(100,100,100,0.7)">{{ object.weiboCreated }}</p>
            <!--            <p style="color: rgba(100,100,100,0.9)">{{ object.weiboContent }}</p>-->

            <div style="width: 350px;display: flex;flex-wrap: wrap">
              <p style="color: rgba(100,100,100,0.9)" v-if="isContent">{{ object.weiboContent }}</p>
              <p style="color: rgba(100,100,100,0.9)" v-else>{{ weiboListContent[index] }}</p>
              <p style="margin-left: 5px" v-if="weiboListContent[index].length>20">
                <el-link :underline="false" @click="isContent=true">展开</el-link>
                <el-link :underline="false" @click="isContent=false">收起</el-link>
              </p>
            </div>

            <div class="div_comment">
              <el-badge is-dot class="item">
                <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
              </el-badge>
              <el-badge :value="object.commentSize" :max="99" class="item" type="primary">
                <el-button size="small" @click="isOpen(object)">评论</el-button>
              </el-badge>
              <el-badge :value="2" class="item" type="warning">
                <el-button size="small">
                  <p class="el-icon-thumb" style="font-size: 20px"></p>
                </el-button>
              </el-badge>
            </div>
          </div>
        </div>

        <div v-if="object.isOpenComment">

          <!--     评论   -->
          <div>
            <el-divider/>

            <el-form :model="comment">
              <el-form-item>
                <el-input placeholder="发布你的评论" v-model="comment.content"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <el-col :span="18">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" round @click="newComment(object.weiboId)">评论</el-button>
              </el-col>
            </el-row>
            <el-divider/>
          </div>

          <!--      评论内容  -->
          <div>
            <div style="display: flex;margin-bottom: 10px" v-for="item in object.commentList" :key="item.commentId">
              <el-avatar :size="40" :src="imgUrl"></el-avatar>
              <div class="avatar">
                <p style="font-size: 15px">{{ item.commentUsername }}&nbsp;:{{ item.commentContent }}</p>
                <p style="font-size: 12px;color: rgba(100,100,100,0.7)">{{ item.commentCreated }}</p>
                <el-button type="primary" icon="el-icon-delete" @click="deleteComment(item.commentId)"></el-button>
              </div>
            </div>
          </div>

        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      weiboList: [],
      weiboListContent: [],
      //评论
      comment: {},
      weibo: {},
      bool:false,
      isContent: true
    }
  },
  computed: {},
  methods: {
    isOpen(object) {
      //false   =   true
      object.isOpenComment = !object.isOpenComment;
    },
    newComment(weiboId) {
      const user = localStorage.getItem('user');
      if (user == null) {
        this.$message.error("当前未登录,请前往登录后重试！！！")
        this.$router.push("/login")
        return;
      }

      const userId = JSON.parse(user).id;
      this.comment.userId = userId;
      this.comment.weiboId = weiboId;
      this.axios.post('http://localhost:19000/v1/comment/new-comment', this.qs.stringify(this.comment))
          .then((response) => {
            if (response.data.code == 20000) {
              this.$message.success("评论成功！")
              this.$router.go(0)
            } else {
              this.$message.error(response.data.message);
            }
          })

    },
    selectByContent() {
      //搜索
      if (this.weibo.content == null) {
        return;
      }
      this.axios.get("http://localhost:19000/v1/weibo/weibo-list-content?content=" + this.weibo.content)
          .then((response) => {
            if (response.data.code === 20000) {
              this.weiboList = response.data.data;

              if (this.weiboList.length===0){
                this.bool=true;
                this.selectList()
              }else{
                this.bool=false;
              }
              this.sliceString()
            }
          })
    },
    deleteComment(id){
      this.axios.delete('http://localhost:19000/v1/weibo/comment-delete/'+id)
          .then((response) => {
            if (response.data.code === 20000) {
              this.$message.success("删除成功！")
            }else{
              this.$message.error(response.data.message)
            }
          })
    },
    selectList(){
      this.axios.get('http://localhost:19000/v1/weibo/weibo-list')
          .then((response) => {
            if (response.data.code === 20000) {
              this.weiboList = response.data.data;

              this.sliceString()
            }
          })
    },
    sliceString(){
      for (let i = 0; i < this.weiboList.length; i++) {
        var weiboListElement = this.weiboList[i].weiboContent;
        this.weiboListContent.push(
            weiboListElement.length > 20 ? weiboListElement.slice(0, 20) + "..." : weiboListElement
        )
      }
    }
  },
  mounted() {
    //http://localhost:19000/v1/weibo/weibo-list
    this.selectList();


  }
}
</script>


<style scoped>
.avatar {
  margin-left: 10px;
}

.avatar > p {
  margin-bottom: 10px;
}

.div_comment {
  margin-top: 30px;
  display: flex;
  width: 350px;
  justify-content: space-between;
}

.div_comment .el-button {
  width: 60px;
  height: 35px;
}
.el-link{
  font-size: 11px;
}
</style>

<!--
//.div_comment {
//  margin-top: 40px;
//  text-align: center;
//  width: 350px;
    弹性盒子
//  display: flex;
    超出盒子后换行
//  flex-wrap: wrap;
    分布
//  justify-content: space-between;
//}
//
//.el-button {
//  width: 60px;
//  height: 35px;
//}
-->